<!-- login.njk -->
{% extends './layout.html' %}

{% set isNav=false %}
{% set title="微博-登录" %}
{% set isNarrow= false %}

{% block content %}
<div class="container margin-top-20">
  <h1>登录</h1>

  {% if isLogin %}
  <p>{{userName}}您已成功登录，请直接访问<a href="/">首页</a></p>
  {% else %}
  <hr>
  <form>
    <div class="form-group">
      <input type="text" class="form-control" id="input-username" placeholder="请输入用户名" />
    </div>
    <div class="form-group">
      <input type="password" class="form-control" id="input-password" placeholder="请输入密码" />
    </div>
    <button type="submit" class="btn btn-primary" id="btn-submit">登录</button>
    &nbsp;
    <a href="/register">注册账号>></a>
  </form>
  {% endif %}
</div>
{% endblock %} {% block js %}
<script>
  $(function () {
    var $inputUserName = $("#input-username");
    var $inputPassword = $("#input-password");
    $("#btn-submit").click(function (e) {
      // 阻止默认的提交表单行为
      e.preventDefault();
      const userName = $inputUserName.val();
      const password = $inputPassword.val();

      // 提交数据
      ajax.post(
        "/api/user/login",
        {
          userName,
          password,
        },
        function (err, data) {
          if (err) {
            alert(err);
            return;
          }
          // http://localhost:3000/login?url=xxx
          // 比如访问的是个人页，但是没有登录，这个时候跳转到登录页面，登录后跳转到个人页
          // 跳转到指定 url 或首页
          // $.query.get()  方法依赖于jquery的一个插件  query-object.js 官网下载就可以
          var redirectUrl = $.query.get("url") || "/";
          location.href = redirectUrl;
        }
      );
    });
  });
</script>
{% endblock js %}